import React from 'react';
import './road.scss';
import { api } from 'js/api/api';
import { userData } from 'js/core/userData';
import Progress from 'views/component/progress/progress';
import { observer, inject } from 'mobx-react';
import { panelPop } from 'views/modal/panelPop/panelPop';

//1拾取,2采集,3采矿,4采伐,5钓鱼,6事件
let handleText = {
    1: '拾取', 2: '采集', 3: '采矿', 4: '采伐', 5: '钓鱼', 6: '调查'
};

@inject("playerStore")
@observer
class Main extends React.Component {
    constructor() {
        super()
    }
    onClick = (buildingId, buildingType) => {
        if (buildingType === 1 || buildingType === 2 || buildingType === 3 || buildingType === 4 || buildingType === 5) {
            panelPop.showModal('pickup', {
                buildingId: buildingId, buildingType: buildingType, complete: () => {
                    this.setState({})
                },
            });
        }
    }
    renderBuildNode = () => {
        let buildingConfig = window.totalConfig.building, propName = window.propName;
        let player = this.props.playerStore.player;
        let basicInfo = player.basicInfo;
        let mapId = basicInfo.mapId;
        let mapInfo = player.mapInfos[mapId];
        let building = mapInfo.building;
        let buildingNode = [];

        for (let buildingId in building) {
            let buildingType = buildingConfig[buildingId].buildingType;
            let itemNode = [];
            let item = buildingConfig[buildingId].item;
            if (item) {
                for (let itemId in item) {
                    itemNode.push(<div className="">{propName[itemId]}x{item[itemId]}</div>)
                }
            }
            buildingNode.push(<div className="resource flex">
                <div className="resource-name">{buildingConfig[buildingId].name}</div>
                <div className="resource-content flex-g-1">
                    {itemNode}
                </div>
                <div className="handle"><button onClick={() => { this.onClick(buildingId, buildingType) }}>{handleText[buildingType]}</button></div>
            </div>)
        }
        return buildingNode;
    }
    render() {
        return (
            <div id="road" className="flex-col">
                <div className="buildContent">
                    <div className="building">
                        {this.renderBuildNode()}
                    </div>
                </div>
                <div className="flex-col-center flex-g-1">
                    <Progress onEnd={this.investigate}>探索</Progress>
                </div>
            </div>
        )
    }
}

export default Main;